<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省份</title>
    <script>
        //对象分为 成员属性 和 成员方法
        //声明一个对象的三种方式
          //1）.var obj1 = new Object();
                    // 成员属性
                    //obj1.nmae = '欧阳云蕾';
                    //obj1.age = 18;

                    //成员方法
                    //obj1.sleep = function ) {
                    //     alert('我在睡觉')
                    // }
                    //alert(obj1.name);
                    //alert(obj1.age);
                    //obj1.sleep();
          //2）.var obj2 = {};
                    /*var fun = function(){
                        //成员属性
                        this.name = '欧阳云蕾';
                        this.age = 18;
                        //成员方法
                        this.sleep = function(){
                            alert('我睡觉了！')
                        };
                    };
                        //调用方法
                        alert(obj2.name);
                        alert(obj2.age);
                        obj2.sleep();*/
          //3）.var obj3 = new fun();（老师推荐用法）
              // 声明一个对象 - 键值对[key-value] value可以是任何类型 还可以嵌套数组
              //json - javascript的原生数据对象 主要用于数据传输
                    /*var obj3 = {
                        name:'欧阳云蕾',
                        age : 20,
                        lovely : ['看电影','听音乐'],
                        major :{
                            name:'电子商务',
                            clazz :'1501'
                        },
                        sleep:function () {
                            alert('我睡觉了！');
                        }
                    };
                        alert(obj3.name);
                        alert(obj3.age);
                        obj3.sleep();*/


        //做一个省 市 区的选择下拉框
        //首先定义三个数组 省份用普通数组 市和区用二维数组
        /*var selData1 = ['湖南','广东'];
        var selData2 = [['长沙市','衡阳市'],['广州市','深圳市']];
        var selData3 = [
            //长沙
            ['芙蓉区','雨花区','岳麓区','开福区'],
            //衡阳
            ['石鼓区','珠晖区','雁峰区','南岳区']
            //广州
            ['花都区','越秀区','白云区','荔湾区']
            //深圳
            ['南山区','盐田区','福田区','宝安区']
        ];*/
        //将三个数组改用json写法
        var data = {
            'HN': {
                name: '湖南',
                child: {
                    'CS': {
                        name: '长沙',
                        child: {
                            'FR': {name: '芙蓉区'},
                            'YH': {name: '雨花区'},
                            'YL': {name: '岳麓区'},
                            'KF': {name: '开福区'}
                        }
                    },
                    'HY': {
                        name: '衡阳',
                        child: {
                            'FR': {name: '石鼓区'},
                            'YH': {name: '珠晖区'},
                            'YL': {name: '雁峰区'},
                            'KF': {name: '南岳区'}
                        }
                    }

                }
            },
            'GD': {
                name: '广东',
                child: {
                    'GZ': {
                        name: '广州',
                        child: {
                            'FR': {name: '花都区'},
                            'YH': {name: '越秀区'},
                            'YL': {name: '白云区'},
                            'KF': {name: '荔湾区'}
                        }
                    },
                    'SZ': {
                        name: '深圳',
                        child: {
                            'FR': {name: '南山区'},
                            'YH': {name: '盐田区'},
                            'YL': {name: '福田区'},
                            'KF': {name: '宝安区'}
                        }
                    }

                }
            }
        };

        //清除下拉框
        var clearSelect = function (sels) {
            for (var i = sels.options.length - 1; i > 0; i--) {
                sels.removeChild(sels.options[i])
            }
        };
        //页面加载
        window.onload = function () {
            //先初始化省份数据
            //循环遍历json数据  使用for in
            for (var i in data) {
                var opt = document.createElement('option');
                opt.textContent = data[i]['name'];
                opt.value = i;
                document.getElementById('sel1').appendChild(opt);
            }
            //onchange 改变的事件
            document.getElementById('sel1').onchange = function () {
                //清除老数据
                clearSelect(document.getElementById('sel2'));
                clearSelect(document.getElementById('sel3'));
                //添加新数据
                if (this.value != '') {
                    var child_data = data[this.value]['child'];
                    for (var i in child_data) {
                        var opt = document.createElement('option');
                        opt.textContent = child_data[i]['name'];
                        opt.value = i;
                        document.getElementById('sel2').appendChild(opt);
                    }
                }
            };
            document.getElementById('sel2').onchange = function () {
                clearSelect(document.getElementById('sel3'));
                if (this.value != '') {
                    var child2_data = data[document.getElementById('sel1').value]['child'][this.value]['child'];
                    for (var i in child2_data) {
                        var opt = document.createElement('option');
                        opt.textContent = child2_data[i]['name'];
                        opt.value = i;
                        document.getElementById('sel3').appendChild(opt);
                    }
                }
            }
        }

    </script>
</head>
    <body>
        省份：<select id="sel1">
            <option value="">请选择</option>
            </select>
        &nbsp;市县：<select id="sel2">
            <option value="">请选择</option>
            </select>
        &nbsp;区域：<select id="sel3">
            <option value="">请选择</option>
            </select>
    </body>
</html>